<!--
GRAKN.AI - THE KNOWLEDGE GRAPH
Copyright (C) 2018 Grakn Labs Ltd

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

<template>
<div class="wrapper">
  <signup-modal></signup-modal>
  <commands-modal></commands-modal>

    <div class="navigation">
        <nav-bar :componentCenterLeft="componentCenterLeft" :componentCenter="componentCenter" :componentCenterRight="componentCenterRight" v-on:toogle-sidebar="showSideBar=!showSideBar"></nav-bar>
    </div>
    <div class="content">
        <side-bar :showSideBar="showSideBar"></side-bar>
        <keep-alive include="GraphPage">
            <router-view></router-view>
        </keep-alive>
    </div>
</div>
</template>

<style>
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.content {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    position: relative;
}
</style>

<script>
// Sub-components
import NavBar from './navbar.vue';
import SignupModal from './signupModal.vue';
import CommandsModal from './commandsModal.vue';
import SideBar from './sidebar.vue';
import User from '../../js/User';


const computeComponentCenter = function computeComponentCenter(path) {
  switch (path) {
    case '/graph':
    case '/console':
      return 'GraqlEditor';
      break;
    default:
      return null;
  }
};
const computeComponentCenterRight = function computeComponentRight(path) {
  switch (path) {
    case '/graph':
    case '/console':
      return 'KeyspacesSelect';
      break;
    default:
      return null;
  }
};

// TODO: decide whether keep this component or not. Not used for now.
const computeComponentCenterLeft = function (path) {
  return null;
};

export default {
  name: 'MainTemplate',
  components: {
    NavBar,
    SignupModal,
    CommandsModal,
    SideBar,
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.componentCenterLeft = computeComponentCenterLeft(to.path);
      vm.componentCenterRight = computeComponentCenterRight(to.path);
      vm.componentCenter = computeComponentCenter(to.path);
    });
  },
  data() {
    return {
      componentCenterLeft: undefined,
      componentCenterRight: undefined,
      componentCenter: undefined,
      showSideBar: false,
    };
  },

  created() {},

  mounted() {
    this.$nextTick(() => {
          // Initialise toastr.js plugin to use custom options
      toastr.options = {
        closeButton: true,
        debug: false,
        newestOnTop: false,
        progressBar: false,
        positionClass: 'toast-bottom-right',
        preventDuplicates: false,
        showDuration: '300',
        hideDuration: '1000',
        timeOut: '3000',
        extendedTimeOut: '1000',
        showEasing: 'swing',
        hideEasing: 'linear',
        showMethod: 'fadeIn',
        hideMethod: 'fadeOut',
      };

      if (!User.getModalShown()) {
        const modal = document.getElementById('myModal');
        modal.style.display = 'block';
        User.setModalShown(true);
      }
    });
  },
  watch: {
        // When the route changes we need to tell the navbar what to inject in computeComponentCenter && componentCenterLeft && componentCenterRight
        // based on the component we are rendering in the router-view
    $route(newRoute) {
      this.componentCenterLeft = computeComponentCenterLeft(newRoute.path);
      this.componentCenterRight = computeComponentCenterRight(newRoute.path);
      this.componentCenter = computeComponentCenter(newRoute.path);
    },
  },

  methods: {

  },
};
</script>
